// import { captureMouse } from './utils/index.js';
import { UIDiv } from './lib/ui.js';
// import { EventDispatcher } from './EventDispatcher.js';

class Rubber extends UIDiv {
    constructor(editor, mainCanvas) {
        super();
        this.setClass('Rubber');

        this.x = 100;
        this.y = 100;
        this.width = 100;
        this.height = 100;
        // this.event = new EventDispatcher();
        this.editor = editor;
        this.mainCanvas = mainCanvas;
        this.onResize = function(){};

        // point
        let lt = new UIDiv();
        let rt = new UIDiv();
        let lb = new UIDiv();
        let rb = new UIDiv();
        // edge
        let et = new UIDiv();
        let eb = new UIDiv();
        let el = new UIDiv();
        let er = new UIDiv();

        this.ctrls = { lt, rt, lb, rb, et, eb, el, er, }

        lt.setClass('ctrl-point lt');
        rt.setClass('ctrl-point rt');
        lb.setClass('ctrl-point lb');
        rb.setClass('ctrl-point rb');

        et.setClass('ctrl-edge t');
        eb.setClass('ctrl-edge b');
        el.setClass('ctrl-edge l');
        er.setClass('ctrl-edge r');

        Object.keys(this.ctrls).forEach(key => {
            this.add(this.ctrls[key]);
        });
        this.updatePosition();
        this.setup();
        this.hide();
    }

    setup() {

        const self = this;

        let offsetX = 0;
        let offsetY = 0;

        let mouseDownX = 0;
        let mouseDownY = 0;
        let mouseDownW = 0;
        let mouseDownH = 0;

        this.onMouseDown((e) => {
            const state = this.editor.state;

            let target = e.target;
            let { left, top, width, height } = this.dom.getBoundingClientRect();
            let keys = Object.keys(this.ctrls);
            let notInCtrl = keys.every(key => target != this.ctrls[key].dom);
            // 32 是菜单栏高度
            offsetX = e.clientX - left;
            offsetY = e.clientY + 32 - top;

            // update position
            mouseDownX = left;
            mouseDownY = top;
            mouseDownW = width;
            mouseDownH = height;

            if (state === 'move') {

                // 中间区域拖动
                if (notInCtrl) {
                    console.log('move');
                    document.addEventListener('mousemove', onMouseMove);
                    document.addEventListener('mouseup', () => {
                        document.removeEventListener('mousemove', onMouseMove);
                    });
                }
                // 右
                else if (target == this.ctrls.er.dom) {
                    console.log('move er');
                    document.addEventListener('mousemove', moveER);
                    document.addEventListener('mouseup', () => {
                        document.removeEventListener('mousemove', moveER);
                    });
                }
                // 左
                else if (target == this.ctrls.el.dom) {
                    console.log('move el');
                    document.addEventListener('mousemove', moveEL);
                    document.addEventListener('mouseup', () => {
                        document.removeEventListener('mousemove', moveEL);
                    });
                }
                // 上
                else if (target == this.ctrls.et.dom) {
                    console.log('move et');
                    document.addEventListener('mousemove', moveET);
                    document.addEventListener('mouseup', () => {
                        document.removeEventListener('mousemove', moveET);
                    });
                }
                // 下
                else if (target == this.ctrls.eb.dom) {
                    console.log('move eb');
                    document.addEventListener('mousemove', moveEB);
                    document.addEventListener('mouseup', () => {
                        document.removeEventListener('mousemove', moveEB);
                    });
                }
                // 右上
                else if (target == this.ctrls.rt.dom) {
                    console.log('move rt');
                    document.addEventListener('mousemove', moveRT);
                    document.addEventListener('mouseup', () => {
                        document.removeEventListener('mousemove', moveRT);
                    });
                }
                // 右下
                else if (target == this.ctrls.rb.dom) {
                    console.log('move rb');
                    document.addEventListener('mousemove', moveRB);
                    document.addEventListener('mouseup', () => {
                        document.removeEventListener('mousemove', moveRB);
                    });
                }
                // 左上
                else if (target == this.ctrls.lt.dom) {
                    console.log('move lt');
                    document.addEventListener('mousemove', moveLT);
                    document.addEventListener('mouseup', () => {
                        document.removeEventListener('mousemove', moveLT);
                    });
                }
                // 左下
                else if (target == this.ctrls.lb.dom) {
                    console.log('move lb');
                    document.addEventListener('mousemove', moveLB);
                    document.addEventListener('mouseup', () => {
                        document.removeEventListener('mousemove', moveLB);
                    });
                }

            }

        });

        /* move */
        function onMouseMove(e) {
            let left = e.clientX - offsetX;
            let top = e.clientY - offsetY;
            self.x = left;
            self.y = top;
            // self.setStyle('left', [left]);
            // self.setStyle('top', [top]);
            self.updatePosition();
            self.onResize();
        }

        /* move edge */
        function moveER(e) {
            let dx = e.clientX - mouseDownX - mouseDownW;
            let w = mouseDownW + dx;
            self.width = w;
            // self.setStyle('width', [w + 'px']);
            self.updatePosition();
            self.onResize();
        }
        function moveEL(e) {
            let dx = mouseDownX - e.clientX;
            let x = mouseDownX - dx;
            let w = mouseDownW + dx;
            self.width = w;
            self.x = x;
            // self.setStyle('width', [w + 'px']);
            // self.setStyle('left', [x + 'px']);
            self.updatePosition();
            self.onResize();
        }
        function moveET(e) {
            let dy = mouseDownY - e.clientY;
            let y = mouseDownY - dy - 32;
            let h = mouseDownH + dy;
            self.y = y
            self.height = h
            // self.setStyle('height', [h + 'px']);
            // self.setStyle('top', [y + 'px']);
            self.updatePosition();
            self.onResize();
        }

        function moveEB(e) {
            let dy = e.clientY - mouseDownY - mouseDownH;
            let h = mouseDownH + dy;
            self.height = h;
            // self.setStyle('height', [h + 'px']);
            self.updatePosition();
            self.onResize();
        }
        /* move point */
        function moveRT(e) {
            moveER(e);
            moveET(e);
        }
        function moveRB(e) {
            moveER(e);
            moveEB(e);
        }
        function moveLT(e) {
            moveEL(e);
            moveET(e);
        }
        function moveLB(e) {
            moveEL(e);
            moveEB(e);
        }
    }

    updatePosition() {
        this.setStyle('left', [this.x + 'px']);
        this.setStyle('top', [this.y + 'px']);
        this.setStyle('width', [this.width + 'px']);
        this.setStyle('height', [this.height + 'px']);
        // this.translate(this.mainCanvas.startOffsetX, this.mainCanvas.startOffsetY);
        // this.event.dispatchEvent({ type: 'position-change' });
    }

    hide() {
        this.setStyle('display', ['none']);
    }
    show() {
        this.setStyle('display', ['block']);
    }
    attr(key, value) {
        if (typeof key === 'object' && key != null) {
            let obj = key;
            Object.keys(obj).forEach(k => {
                this[k] = obj[k];
            });
            this.updatePosition();
        } else {
            this[key] = value;
            this.setStyle(key, [value + 'px']);
        }
    }
    translate(x, y) {
        this.setStyle('transform', [`translate(${x}px, ${y}px)`]);
    }

}

export { Rubber };